<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">
    <script src="../assets/js/views/vue.min.js"></script>
    <%--<link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">--%>
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="${js}/jquery.dataTables.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="../assets/js/views/jquery.validate.js"></script>
    <script src="../assets/js/views/messages_zh.js"></script>
    <style>
        body{
            width:100%;
            overflow:hidden;
        }
        #main{
            width:100%;
            overflow:hidden;
        }
        .test{
            width:100%;
            overflow:hidden;
        }
        .test p{
            width:100%;
            line-height:100px;
            font-size:15px;
            text-align:center;
        }
        #change{
            position:fixed;
            bottom:16px;
            right:16px;
        }
        label{
            margin-left:5px;
        }
        .text_number input{
            border:1px solid #d0d0d0;
            width:135px;
            height:30px;
        }
        .title{
            line-height:25px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
        }
        .title1{
            line-height:25px;
            font-size:15px;
            color:#666666;
            margin-left:17px;
            margin-top:5px;
        }
        .text_content{
            width:100%;
            margin:20px 0;
        }
        .text_content div{
            width:48%;
            text-align: left;
            display: inline-block;
        }
        .text_number{
            color:#666666;
            /*margin-left:20px;*/
        }
        .bootstrapDatepickr-cal{
            top:465px !important;
        }
        #keep{
            background:#35acfd !important;
        }
        .change{
            position:fixed;
            bottom:5%;
            width:100%;
        }
        .btn{
            width:100px;
            line-height: 15px;
            background: #35acfd;
            color: white;
        }
        .modal-footer{
            width:255px;
            margin:0 auto;
        }
        img{
            max-width:100%;
            height:auto;
        }
        span{
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }
        #szyValue{
            position:absolute;
        }
        .height_unit{
            position:relative;
            left:180px;
            border-left:1px solid #d0d0d0;
            width:40px;
            display:inline-block;
            text-align:center;
            line-height:30px;
        }
        #ssyValue{
            position:absolute;
        }
        #heartRate{
            position:absolute;
        }
        input{
            border: solid 1px #d0d0d0;
            width:210px;
        }
        .height_unit1{
            position:relative;
            left:145px;
            border-left:1px solid #d0d0d0;
            width:40px;
            display:inline-block;
            text-align:center;
            line-height:30px;
        }
        .height_unit2{
            position:relative;
            left:170px;
            border-left:1px solid #d0d0d0;
            width:40px;
            display:inline-block;
            text-align:center;
            line-height:30px;
        }
        .height_unit3{
            position:relative;
            left:156px;
            border-left:1px solid #d0d0d0;
            width:40px;
            display:inline-block;
            text-align:center;
            line-height:30px;
            font-size:14px;
        }
        input{
            line-height:30px;
            vertical-align:middle;
            text-indent:1rem;
        }
        h1{
            font-family: MicrosoftYaHei;
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            color: #2a3137;
            margin-bottom: 26px;
            float: left;
        }
        .defualt{
            border:1px solid red;
        }
        .text_number{
            width:58px;
            display:inline-block;
            font-size:15px;
        }
        .text_content div input{
            position:absolute;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>添加血脂数据</h1>
</div>
<div id="main">
    <div class="test">
        <span style="width:5px;padding-bottom:25px;background-color:#35acfd;display:inline-block;vertical-align:middle"></span>
        <span class="title">新增血脂检测</span>
        <form class="text_content">
            <div>
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                    <img src="../assets/images/TC.png" alt="">
                </span>
                <span class="text_number"  style="margin-left:5px;">TC:</span>
                <input style="margin-left:8px;" type="text" id="szyValue" onkeyup="clearNoNum(this)" data-valid="text" data-error="数值必填" data-type="text">
                <span class="height_unit3">mmol/L</span>
            </div>
            <div style="margin-left:20px;">
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                    <img src="../assets/images/TG.png" alt="">
                </span>
                <span class="text_number" style="margin-left:5px;">TG:</span>
                <input type="text" id="ssyValue" onkeyup="clearNoNum(this)" style="margin-left:8px;">
                <span class="height_unit3">mmol/L</span>
                </span>
            </div>
            <div style="margin-top:15px;">
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                    <img src="../assets/images/HDL.png" alt="">
                </span>
                <span class="text_number" style="margin-left:5px;">HDL-C: </span>
                <input  style="margin-left:8px;" type="text" id="heartRate" onkeyup="clearNoNum(this)">
                <span class="height_unit3">mmol/L</span>
            </div>
            <div style="margin-top:15px;margin-left:20px;">
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                    <img src="../assets/images/LDL.png" alt="">
                </span>
                <span class="text_number" style="margin-left:5px;">LDL: </span>
                <input  style="margin-left:8px;" type="text" id="LDL" onkeyup="clearNoNum(this)">
                <span class="height_unit3">mmol/L</span>
            </div>
            <div style="margin-top:15px;">
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                    <img src="../assets/images/HCY.png" alt="">
                </span>
                <span class="text_number" style="margin-left:5px;">HCY: </span>
                <input  style="margin-left:8px;" type="text" id="HCY" onkeyup="clearNoNum(this)">
                <span class="height_unit3">mmol/L</span>
            </div>
            <div style="margin-top:15px;margin-left:20px;">
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                    <img src="../assets/images/apoAI.png" alt="">
                </span>
                <span class="text_number" style="margin-left:5px;">APO-AI: </span>
                <input  style="margin-left:8px;" type="text" id="APO-AI" onkeyup="clearNoNum(this)">
                <span class="height_unit3">mmol/L</span>
            </div>
            <div style="margin-top:15px;">
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle">
                    <img src="../assets/images/APOB.png" alt="">
                </span>
                <span class="text_number" style="margin-left:5px;">APOB: </span>
                <input  style="margin-left:8px;" type="text" id="APOB" onkeyup="clearNoNum(this)">
                <span class="height_unit3">mmol/L</span>
            </div>
            <div style="display:inline-block;margin-top:15px;margin-left:20px;">
                <span style="width:20px;height:20px;display: inline-block;vertical-align:middle;">
                    <img src="../assets/images/time.png" alt="">
                </span>
                <span class="time text_number" style="margin-left:5px;">时间：</span>
                <div style="display:inline-block;width:210px;vertical-align:middle;margin-left:3px;">
                    <div class="times">
                        <div id="PrevTime" class="input-group date form_date" style="width: 100%"  data-date-format="yyyy-mm-dd">
                            <input readonly="readonly" id="beginDate" type="text" class="lay-date" style="width:210px;position:static;margin-left:6px;">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="change">
        <div class="form-group submitBtn" style="text-align: center ">
            <button type="button" class="btn" data-dismiss="modal" id="closeModalButt" @click="closeFrame()">
                关闭
            </button>
            <button type="submit" class="btn" id="keep"  @click="keep()" style="margin-left:20px;">保存</button>
        </div>
    </div>
</div>

<script>
    var vm = new Vue({
        el:"#main",
        data:{
            idcard:'',
            diseasesType:'',
            Type:''
        },
        mounted(){
            //初始化获取数据
            // 获取用药名称
            let that = this;
            var url = location.search;
            // 获取idcard
            that.idcard = url.split('?')[1].split('&')[0].split('=')[1]
            that.diseasesType = url.split('?')[1].split('&')[1].split('=')[1]
            that.Type = url.split('?')[1].split('&')[2].split('=')[1]
            $('.text_content').validate();
            var inputs = $('input')
            for( var a = 0; a < inputs.length; a++ ){
                $(inputs[a]).bind('change',function(){
                    if( $(this).val() != '' ){
                        $(this).removeClass('defualt')
                    }
                })
            }
        },
        methods:{
            closeFrame : function() {
                window.parent.simpleCloseModal();
            },
            keep:function(){
                let that = this;
                //  结果
                var tc = $('#szyValue').val()
                var tg = $('#ssyValue').val()
                var hdl = $('#heartRate').val()
                var LDL = $('#LDL').val()
                var HCY = $('#HCY').val()
                var APOAI = $('#APO-AI').val()
                var APOB = $('#APOB').val()
                //  检查时间
                var checkTime = $('#beginDate').val()
                if( tc != '' && tg != '' && hdl != '' && checkTime!= '' ){
                    $.ajax({
                        url:"${URL_BF_ADDBFINGO}",
                        data:{
                            idCard : that.idcard,
                            tc:tc,
                            tg:tg,
                            ldl:LDL,
                            hcy:HCY,
                            apoAI:APOAI,
                            apoB:APOB,
                            hdl:hdl,
                            testTime:checkTime
                        },
                        dataType:"json",
                        type:"post",
                        success:function(data){
                            if( data.success ){
                                parent.showSrc('${URL_PATIENT_TOARCHIVES}?idCard=' + that.idcard +'&diseasesType='+that.diseasesType+'&type='+that.Type)
                                that.closeFrame()
                            }
                        }
                    })
                }else{
//                    if( tc === '' ){
//                        $('#szyValue').focus()
//                        $('#szyValue').attr('placeholder','请输入数值')
//                    }
                    var inputs = $('input')
                    var arr = []
                    for( var a = 0; a < inputs.length; a++ ){
                        if( $(inputs[a]).val() === '' ){
                            $(inputs[a]).attr('placeholder','请输入数值')
                            $(inputs[a]).addClass('defualt')
                            arr.push($(inputs[a]))
                        }
                    }
                    arr[0].focus()
                    $(arr[0]).removeClass('defualt')
                }
            }
        }
    })
    function initLayDate(id) {
        laydate({
            elem: id,
            istime: true,
            format: 'YYYY-MM-DD hh:MM:ss',
            choose: function (dates) { //选择好日期的回调
                // initTablePatient();
            }
        })
    }
    $(document).ready(function() {
        initLayDate('#beginDate');
        // 初始化获取当前时间
        var date=new Date();
        var year=date.getFullYear(); //获取当前年份
        var mon=date.getMonth()+1; //获取当前月份
        if( parseInt(mon) < 10 ){
            mon = '0' + mon
        }
        var da=date.getDate(); //获取当前日
        if( parseInt(da) < 10 ){
            da = '0' + da
        }
        var h=date.getHours(); //获取小时
        if( parseInt(h) < 10 ){
            h = '0' + h
        }
        var m=date.getMinutes(); //获取分钟
        if( parseInt(m) < 10 ){
            m = '0' + m
        }
        var s=date.getSeconds(); //获取秒
        if( parseInt(s) < 10 ){
            s = '0' + s
        }
        var d=document.getElementById('beginDate');
        d.value = year + '-' + mon + '-' + da + ' ' + h + ':' + m + ":" + s
    });
    function clearNoNum(obj){   obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/^\./g,"");  //验证第一个字符是数字而不是.
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的.
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    }

</script>
</body>
</html>

